﻿@{
    Layout = "~/Views/HttpRequestMonitor/HttpRequestMonitorTemplate.cshtml";

    List<string> nodes = ViewBag.nodes;

    var lang = ViewBag.Language as JESAI.HttpRequestMonitor.Dashboard.Services.Language.ILanguage;
}



<div class="panel panel-default">

    <div class="panel-body" style="padding-left:30px;padding-right:30px;padding-top:30px;min-height:720px">

        <div class="row" style="padding-left:13px;padding-right:13px">

            <div class="panel panel-default">
                <div class="panel-body shadow-box" style="padding-bottom:20px">

                    <div class="form-inline form">

                        <div class="col-sm-12" style="margin-top:10px">

                            <b><i class="glyphicon glyphicon-signal" style="margin-right:10px"></i>@lang.Index_ServiceNode</b>

                            <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" title="@lang.Index_ServiceNodeTip" style="font-size:20px;top:0.2em;cursor:pointer;"></span>

                            @*<button type="button" onclick="select_all(this)" style="width:60px;margin-right:8px;margin-left:8px" class="btn btn-success btn-xs">全选</button>

                                <button type="button" onclick="select_reverse(this)" style="width:60px;margin-right:8px;" class="btn btn-success btn-xs">反选</button>*@
                        </div>

                        <div class="col-sm-12 node-row" style="margin-top:8px;margin-bottom:8px;min-height:44px">

                            @foreach (var item in nodes)
                            {
                                <button onclick="check_node(this)" style="width:120px;margin-left:20px;border-radius:4px;" class="btn btn-info service-button">@item</button>
                            }
                        </div>
                    </div>

                    <div class="form-inline form" style="margin-bottom:30px;">

                        <div class="col-sm-3">
                            <label class="form-label">@lang.StartTime</label>
                            <input onfocus="ClearTimeRange()" type="text" class="form-control laydate start">
                        </div>

                        <div class="col-sm-3">
                            <label class="form-label">@lang.EndTime</label>
                            <input onfocus="ClearTimeRange()" type="text" class="form-control laydate end">
                        </div> 

                    </div>

                    <div class="col-sm-12 timeSelect" style="margin-top:20px">

                        <button type="button" onclick="timeChange(this,15)" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">@lang.Time_15m</button>

                        <button type="button" onclick="timeChange(this,30)" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">@lang.Time_30m</button>

                        <button type="button" onclick="timeChange(this,60)" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">@lang.Time_1h</button>

                        <button type="button" onclick="timeChange(this,60*4)" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">@lang.Time_4h</button>

                        <button type="button" onclick="timeChange(this,60*12)" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">@lang.Time_12h</button>

                        <button type="button" onclick="timeChange(this,60*24)" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">@lang.Time_24h</button>

                    </div>

                    <div class="col-sm-12" style="">

                        <div class="col-sm-3" style="padding-left:0">

                            <button style="min-width:120px;" onclick="QueryClick(this)" class="btn btn-info btn-search">@lang.Query</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top:30px;padding-left:13px;padding-right:13px">

            <div class="board-row panel panel-default panel-body shadow-box"> 
                
                <div class="col-lg-2 col-sm-6 col-xs-6 col-xxs-12">

                    <div class="smallstat teal-bg">  
                        <b><span class="value">0</span></b>
                        <h4>@lang.Index_RequestCount</h4>
                    </div>
                </div>

                <div class="col-lg-2 col-sm-6 col-xs-6 col-xxs-12">
                    <div class="smallstat blue-bg"> 
                      
                        <b><span class="value">0</span></b>
                        <h4>@lang.Index_ART (ms)</h4>
                    </div>
                </div>

                <div class="col-lg-2 col-sm-6 col-xs-6 col-xxs-12">
                    <div class="smallstat purple-bg">

                        <b><span class="value">0</span></b>
                        <h4>404</h4>
                    </div>
                </div>

                <div class="col-lg-2 col-sm-6 col-xs-6 col-xxs-12">
                    <div class="smallstat red-bg">

                        <b><span class="value">0</span></b>
                        <h4>500</h4>
                    </div>
                </div>

                <div class="col-lg-2 col-sm-6 col-xs-6 col-xxs-12">
                    <div class="smallstat blue-bg">
                        <b><span class="value">0</span></b>
                        <h4>@lang.Index_ErrorPercent</h4>
                    </div>
                </div>

                <div class="col-lg-2 col-sm-6 col-xs-6 col-xxs-12">
                    <div class="smallstat purple-bg">
                        <b><span class="value">0</span></b>
                        <h4>@lang.Index_APICount</h4>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top:40px;">

            <div class="col-md-6">

                <div class="panel panel-default">
                    <div class="panel-body shadow-box">
                        <div id="StatusCodePie" style="height:320px;width:99%"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">

                <div class="panel panel-default">
                    <div class="panel-body shadow-box">
                        <div id="ResponseTimePie" style="height:320px;width:99%"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-md-6">

                <div class="panel panel-default">
                    <div class="panel-body shadow-box">

                        <div class="col-sm-12" style="padding-left:32px;">

                            <div class="row form-inline">

                                <label class="form-label">@lang.Index_SelectCount</label>
                                <select onchange="changeTopCount(this)" class="form-control topCount" style="min-width:120px">
                                    <option value="10">10</option>
                                    <option value="15">15</option>
                                    <option value="20">20</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-12">

                            <div id="MostRequestChart" style="min-height:420px; width:99%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">

                <div class="panel panel-default">
                    <div class="panel-body shadow-box">

                        <div class="col-sm-12" style="padding-left:32px;min-height:34px">
                        </div>

                        <div class="col-sm-12">

                            <div id="Code500RequestChart" style="min-height:420px; width:99%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-md-6">

                <div class="panel panel-default">
                    <div class="panel-body shadow-box">

                        <div class="col-sm-12">

                            <div id="FastARTChart" style="min-height:420px; width:99%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">

                <div class="panel panel-default">
                    <div class="panel-body shadow-box">

                        <div class="col-sm-12">

                            <div id="SlowARTChart" style="min-height:420px; width:99%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/HttpRequestMonitorStaticFiles/Content/page/index.js?ver=1.0.4"></script>